<template>
  <div id="home">
    <div class="header">
      <div class="address" @click="$router.push({ name: 'address', params: { city: city } })">
        <div class="shopping_address">
          <i class="fa fa-map-marker
"></i>
          <span>{{ getaddress }}</span>
        </div>
        <i class="fa fa-sort-desc"></i>
      </div>

    </div>
    <div class="search" :class="{fixed: isFixed}">
      <button @click="$router.push('/search')"><i class="fa fa-search"></i>搜索商家 商家名称</button>
    </div>
    <div class="container">
      <mt-swipe :auto="4000" class="swiper">
        <mt-swipe-item v-for="(item,index) in swiperList" :key="index">
          <img :src="item" alt="">
        </mt-swipe-item>
      </mt-swipe>

      <mt-swipe class="entries_wrap">
        <mt-swipe-item v-for="(items,indey) in entries" :key="indey">
          <div class="foodentry" v-for="(item,indez) in items" :key="indez">
            <img :src="item.image" alt="">
            <span>{{ item.name }}</span>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 推荐商家 -->
    <div class="recommend">推荐商家</div>

    <!-- 导航 -->
    <filter-view :filterViewData="filterViewData" @clickNav="isFixedTop" @hideMask="cancleFixed" :class="{navFixed: isFixed}" @getSort="getSort"></filter-view>

    <mt-loadmore :top-method="loadData" :bottom-method="loadMore" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomPullText="bottomPullText">
      <div class="info">
        <shop-info v-for="(item,index) in shopInfoData" :key="index" :data="item.restaurant"></shop-info>
      </div>
    </mt-loadmore>
  </div>
</template>
V
<script>
// 导入轮播图组件
import { Swipe, SwipeItem, Loadmore } from 'mint-ui'
import FilterView from './FiiterView'
import ShopInfo from './ShopInfo'

export default {
  name: 'MyHome',
  computed: {
    getaddress() {
      return this.$store.getters.address
    },
    city() {
      return (this.$store.getters.location.addressComponent.city || this.$store.getters.location.addressComponent.province)
    }
  },
  created() {
    // 获取轮播图数据和  entries 数据
    this.getData()
  },
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      entries: [],
      filterViewData: {},
      isFixed: false,
      // 第几页
      page: 1,
      // 每次最多能显示的条数
      size: 5,
      // 存放商品信息
      shopInfoData: [],
      // 是否加载完毕
      allLoaded: false,
      bottomPullText: '上拉加载更多',
      data: null
    }
  },
  methods: {
    // 获取轮播图数据和  entries 数据
    getData() {
      this.$http('/api/profile/shopping').then(res => {
        this.swiperList = res.data.swipeImgs
        this.entries = res.data.entries
      }).catch(err => {
        console.log(err.message)
      })
      // 获取导航栏中筛选信息
      this.$http('/api/profile/filter').then(res => {
        this.filterViewData = res.data
      }).catch(err => {
        console.log(err.messgae)
      })

      this.loadData()
    },
    isFixedTop() {
      this.isFixed = true
    },
    cancleFixed() {
      this.isFixed = false
    },
    // 获取推荐商家下的导航栏的排序
    getSort(sortCode) {
      this.data = sortCode
      this.loadData()
    },
    // 下拉刷新
    loadData() {
      this.page = 1
      this.allLoaded = false
      this.bottomPullText = '上拉加载更多'
      // 获取商家信息
      this.$http.post(`/api/profile/restaurants/${this.page}/${this.size}`, this.data).then(res => {
        this.$refs.loadmore.onTopLoaded()
        this.shopInfoData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 上拉加载更多
    loadMore() {
      // 还有数据可以加载
      if (!this.allLoaded) {
        this.page++
        this.$http.post(`/api/profile/restaurants/${this.page}/${this.size} `).then(res => {
          //  下拉加载更多
          this.$refs.loadmore.onBottomLoaded()
          if (res.data.length > 0) {
            res.data.forEach(item => {
              this.shopInfoData.push(item)
            })
            // 可能会出现可以显示5条数据  但是只有三条
            if (res.data < this.size) {
              this.allLoaded = true
              this.bottomPullText = '没有更多了哦'
            }
          }
          else {
            this.allLoaded = true
            this.bottomPullText = '没有更多了哦'
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  components: {
    'mt-swipe': Swipe,
    'mt-swipe-item': SwipeItem,
    FilterView,
    ShopInfo,
    'mt-loadmore': Loadmore
  }
}
</script>

<style lang="less" scoped>
.header {
  background-color: #009eef;
  padding: 16px;
  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    .shopping_address {
      display: flex;
      align-items: center;
      i {
        margin-right: 5px;
        &:before {
          font-size: 18px;
        }
      }
      span {
        display: inline-block;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .fa-sort-desc {
      &:before {
        position: relative;
        bottom: 3px;
        font-size: 16px;
      }
    }
    .arrow-botton {
      margin-right: 20px;
      border: 8px solid #ccc;
      border-color: #ccc transparent transparent transparent;
    }
  }
}
.search {
  position: sticky;
  top: 0;
  background-color: #009eef;
  padding: 8px 16px;
  z-index: 999;
  button {
    width: 100%;
    padding: 5px;
    color: #666;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    i {
      margin-right: 5px;
    }
  }
}
.container {
  .swiper {
    height: 100px;
    .mint-swipe-items-wrap {
      .mint-swipe-item {
        img {
          width: 100%;
        }
      }
    }
  }
  .entries_wrap {
    background-color: #fff;
    height: 200px;
    .mint-swipe-item {
      display: flex;
      flex-wrap: wrap;
      .foodentry {
        display: flex;
        position: relative;
        width: 20%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 12vw;
          height: 12vw;
        }
        span {
          color: #666;
          font-size: 0.32rem;
        }
      }
    }
    .mint-swipe-indicators {
      bottom: 0;
    }
  }
}
.recommend {
  text-align: center;
  margin-top: 15px;
  color: #333;
  font-weight: 600;
  &:before,
  &:after {
    content: '—';
    width: 70px;
    height: 7px;
    color: #999;
  }
  &:before {
    margin-right: 10px;
  }
  &:after {
    margin-left: 10px;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}
.navFixed {
  position: fixed;
  top: 32px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
}
.mint-loadmore {
  height: calc(100% - 37px -49px);
  overflow: auto;
}
/deep/.mint-loadmore-bottom {
  margin: 0;
  margin-bottom: 50px;
}
/deep/.mint-loadmore-top {
  margin: 0;
  margin-top: -50px;
}
.mint-loadmore-top,
.mint-loadmore-bottom {
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.info {
  vertical-align: baseline;
}
</style>
